import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
const pathSrc = path.resolve(__dirname, 'src')
console.log('pathSrc,', pathSrc)
// https://vitejs.dev/config/
export default defineConfig(() => {
    return {
        envDir: 'env',

        resolve: {
            alias: {
                '@': pathSrc,
            },
        },

        css: {
            // CSS 预处理器
            preprocessorOptions: {
                // 定义全局 SCSS 变量
                scss: {
                    javascriptEnabled: true,
                    additionalData: `
                  @use "@/styles/variables.scss" as *;
                `,
                },
            },
        },
        plugins: [
            vue(),
            UnoCSS({
                hmrTopLevelAwait: false,
            }),
            // 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
            AutoImport({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue'],
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                resolvers: [
                    ElementPlusResolver(),

                    // Auto import icon components
                    // 自动导入图标组件，不知道用途，对图标在template中的引用无关
                    IconsResolver({
                        prefix: 'Icon',
                    }),
                ],
                //生成eslint 全局变量排除文件，如需生效，需放置在 extends:['./.eslintrc-auto-import.json',]
                eslintrc: {
                    enabled: false,
                    filepath: './.eslintrc-auto-import.json',
                    globalsPropValue: true,
                },
                // vueTemplate 扩展vue/vuecore ComponentCustomProperties 的生命，添加到 auto.imports.d.ts文件中
                vueTemplate: false,
                // 配置文件生成位置(false:关闭自动生成)，生成 type文件，进行全局声明，防止ts报错
                dts: false,
                // dts: "src/types/auto-imports.d.ts",
            }),
            Components({
                resolvers: [
                    // 自动导入 Element Plus 组件
                    ElementPlusResolver(),

                    // 识别<i-ep-xxx>组件,从而使elementplus图标库生效
                    //ep 为elementplus图标库的名称,默认prefix为i
                    // 因此 <i-ep-edit> 将重写为 imort IEpEdit from '~/ep/edit'
                    //配合 Icons插件，实现自动导入 elementplus图标
                    //IconsResolver({ enabledCollections: ['ep'] }),

                    // 检测到 iconabc 开头的图标库
                    //IconsResolver({ prefix: 'iconabc' }),

                    // 检测到 i 开头的图标库
                    IconsResolver(),
                ],
                // 指定自定义组件位置(默认:src/components)
                dirs: ['src/**/components'],
                // 配置文件位置 (false:关闭自动生成)
                //dts: true,
                dts: 'src/types/components.d.ts',
            }),

            Icons({
                //compiler: 'vue3', 加不加都可以
                autoInstall: true,
            }),
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [path.resolve(pathSrc, 'assets/icons')],
                // 指定symbolId格式
                symbolId: 'icon-[dir]-[name]',
            }),
        ],
    }
})
